<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" href="options.css">
	<script type="text/javascript" src="jscolor/jscolor.js"></script> 
	<title id="widget-title">Opera Extensions | Spacer</title>
</head>
<body>
	<header>
		<img src="images/icon_64.png">
		<h1 id="widget-name">Spacer</h1>
		<h2>Made by <span id="widget-author">zolv</h2>
	</header>

	<section>
		<p>Spacer allows You to add an empty Speed Dial tile.</p>
	</section>
	<section>
	<p>
		<label>URL: </label> 
		<input type="text" id="spacerURL" value="http://www.opera.com/">
	</p>
	<p>
		<label>Title: </label> 
		<input type="text" id="spacerTitle" value="">
	</p>
	<p>
		<label>Background: </label> 
	</p>
	<p>
		<input name="background" id="isTransparent" value="true" type="radio"></input>
		<label for="isTransparent">Transparent</label>
	</p>
	<p>
		<input name="background" id="backgroundColour" value="false" type="radio"></input>
		<label for="backgroundColour">Colour: </label> 
		<input type="text" id="backgroundColourText" class="jscolor {hash:true, pickerBorderColor: '#808080', pickerInsetColor: '#808080', pickerFaceColor:'#EFEFEF', pickerClosable:true}" id="jscolor">
	</p>
	<p>	
		<button>Save</button>
	</p>
	</section>

	<footer>
		<p>Powered by the Opera Browser</p>
	</footer>

	<script>
		var spacerURL = document.getElementById('spacerURL');
		var spacerTitle = document.getElementById('spacerTitle');
		var isTransparent = document.getElementById('isTransparent');
		var backgroundColour = document.getElementById('backgroundColour');
		var backgroundColourText = document.getElementById('backgroundColourText');
		
		var tcolor = new jscolor.color(backgroundColourText);
		tcolor.hash = "true";
		tcolor.pickerBorderColor = "#808080";
		tcolor.pickerFaceColor = "#EFEFEF";
		tcolor.pickerInsetColor = "#808080";
		tcolor.pickerClosable = "true";
		save = document.querySelector('button');

		spacerURL.value=widget.preferences.spacerURL;
		spacerTitle.value=widget.preferences.spacerTitle;
		isTransparent.checked = eval(widget.preferences.isTransparent);		
		backgroundColour.checked = !isTransparent.checked;
		tcolor.fromString(widget.preferences.backgroundColour);

		save.addEventListener('click', function(){
			// sanitize and save values
			widget.preferences.spacerURL=spacerURL.value;
			widget.preferences.spacerTitle=spacerTitle.value;
			widget.preferences.isTransparent = eval(isTransparent.checked) ? "true" : "false";
			widget.preferences.backgroundColour = eval(isTransparent.checked) ? "false" : "true";

			var reg=/#([a-z]|[0-9]){3,6}/i;
			if (reg.test(backgroundColourText.value)) {
				widget.preferences.backgroundColour = backgroundColourText.value;
			}
			
			opera.extension.bgProcess.prefChange();
		}, false);
	</script>
</body>
</html>